<!DOCTYPE html>
<html lang="en">
<head>
    <!--<meta charset="UTF-8">-->
    <title>stop()的使用</title>
    <script src="/jquery-3.2.1.js"></script>
    <style type="text/css">
        #filp,#panel{
            padding:5px;
            background: #e5eecc;
            text-align: center;
            border:solid 1px #c3c3c3;
        }
        #panel{
            display: none;
            padding:50px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#filp").click(function () {
                $("#panel").slideDown(5000);
            });
            $("#stop").click(function () {
                $("#panel").stop();
            });
        });
        setTimeout(function(){
            $("#panel").slideUp(5000);
        },5000);
    </script>
</head>
<body>

<button id="stop">停止滑动</button>
<div id="filp">点击向下滑动</div>
<div id="panel">Hello World!!</div>
</body>
</html>